<template>
	<base-wrapper activeTabName="mine">
		<view class="box">
			<view class="box-padding">
				<view class="top-image">
					<img style="width: 100%; height: 600rpx; border-radius: 20rpx" src="/static/images/mine.png" alt="" srcset="" />
				</view>
				<view class="user-info">
					<view class="title">三三传媒</view>
					<view class="info-style">
						<up-image
							:src="userStore.userData.avatar_url ? userStore.userData.avatar_url : src"
							width="90rpx"
							height="90rpx"
							shape="circle"
						></up-image>
						<span style="font-weight: 700; font-size: 40rpx; padding: 0 40rpx">{{ userStore.userData.wxname }}</span>
						<view class="clockIn-Amount">
							<span>已累计打卡{{ userStore.clockInCount == null ? '0' : userStore.clockInCount }}天</span>
							<span>可兑换金额{{ userStore.amount === null ? '0' : userStore.amount }}元</span>
						</view>
					</view>
					<view class="button-style">
						<view class="b-w">
							<up-button @click="goOnselfInfo" color="#f1f5f9">
								<span style="color: #446dfe">{{ userStore.userData.wxopenid != null ? '修改信息' : '注册' }}</span>
							</up-button>
						</view>
						<view class="b-w b2-w">
							<up-button
								:disabled="userStore.userData.wxopenid == null ? true : false"
								color="#5399ed"
								type="primary"
								text="提交打款"
							></up-button>
							<up-button
								:disabled="userStore.userData.wxopenid == null ? true : false"
								color="#41bad5"
								type="primary"
								text="申请记录"
							></up-button>
						</view>
					</view>
				</view>
				<!-- <view @click="getUserProfile"> 登录 </view>
				<view @click="goRegister" class="register"> 注册 </view> -->
				<!-- <up-button @click="openLogin" text="登录"></up-button> -->
			</view>
			<!-- <view class="top">
				<view>
					<up-image :src="src" width="100rpx" height="100rpx" shape="circle"></up-image>
					<span v-if="userStore.userData.wxopenid" style="padding-left: 20rpx"> {{ userStore.userData.wxname }}</span>
				</view>
				<view v-if="!userStore.userData.wxopenid">
					<view @click="openLogin" class="login"> 登录 </view>
					<view @click="goRegister" class="register"> 注册 </view>
				</view>
			</view> -->
		</view>
		<!-- <up-cell-group v-if="userStore.userData.wxopenid">
			<up-cell @click="goOnselfInfo" title="个人信息" isLink></up-cell>
			<up-cell @click="logout" title="退出登录"></up-cell>
		</up-cell-group> -->
		<!-- <view class="container">
			<view class="userinfo"> -->
		<!-- 获取微信头像+从相册选择+拍照 -->
		<!-- <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onCho oseAvatar"> -->
		<!-- <image class="avatar" src="{{avatarUrl}}"></image> --><!-- 111111111
				</button>
			</view>
		</view> -->
	</base-wrapper>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useUserInfo } from '@/stores/userInfo.js';
import { storeToRefs } from 'pinia';

onMounted(async () => {
	console.log('onMounted 我的页面挂载');
	uni.showLoading({ title: '刷新数据中...', mask: true });
	await userStore.updateUserData(userStore.userData.wxopenid);
	uni.hideLoading();
	uni.showToast({ title: '刷新成功!', icon: 'success' });
});

const userStore = useUserInfo();

let src = ref('https://cdn.uviewui.com/uview/album/1.jpg');

const userInfo = ref();

let logout = () => {
	userStore.userStore.userData = {};
	userStore.clockIn = null;
};

let goOnselfInfo = () => {
	if (userStore.userData.wxopenid == null) {
		goRegister();
	} else {
		uni.navigateTo({
			url: 'onselfInfo',
		});
	}
};

let goRegister = () => {
	uni.navigateTo({
		url: 'register',
	});
};
</script>

<style lang="scss" scoped>
uni-page-head .uni-page-head__title {
	font-size: 40rpx !important;
	color: #ff007f !important;
}

:deep(.u-button--square.data-v-461e713c) {
	border-radius: 10px;
}

.box {
	// background-color: #dcdbdb;
	border-radius: 10rpx;
	margin-top: 40rpx;
	display: flex;
	justify-content: left;
	flex-wrap: wrap;

	.box-padding {
		padding: 20rpx;
		width: 100%;
		border-radius: 20rpx;
		background-color: white;
		box-shadow: #fff2ee 1px 1px 15px;
	}

	.top-image {
		height: 600rpx;
	}

	.user-info {
		.title {
			padding: 30rpx 0;
			font-size: 50rpx;
			font-weight: 600;
		}

		.info-style {
			display: flex;
			align-items: center;
			padding: 0 0 30rpx 0;
			.clockIn-Amount {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 10rpx;
				padding: 20rpx 0;

				span {
					display: block;
					font-size: 28rpx;
					color: #333;
				}
			}
		}

		.button-style {
			display: flex;
			flex-wrap: wrap;

			.b-w {
				width: 100%;
			}
			.b2-w {
				display: flex;
				padding-top: 20rpx;
			}
		}
	}
}
</style>
